86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T20a3,[V0_FILE]typescriptreact:file="app/page.tsx" import ThirdPerson from '@/components/third-person' export default function Home() { return ( ) } [V0_FILE]typescriptreact:file="components/third-person.tsx" isMoved="true" "use client" import { useRef, useState, useEffect, Suspense } from 'react' import { Canvas, useFrame, useThree, useLoader } from '@react-three/fiber' import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' function resetBoneScales(object) { object.traverse((node) => { if (node.isBone) { node.scale.set(1, 1, 1) } }) } function Character({ position, rotation, isMoving }) { const group = useRef() const [error, setError] = useState(null) const [characterLoaded, setCharacterLoaded] = useState(false) const [animationsLoaded, setAnimationsLoaded] = useState(false) const characterGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ybot-ZdlE22y9EOO9IhNHYx9xoyhHV8zrH5.glb', undefined, (error) => { console.error('Error loading character model:', error) setError('Failed to load character model') } ) const walkAnimationGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/walking4-FC1B5O8rz7de2Syk4KyoT7KvtZVafb.glb', undefined, (error) => { console.error('Error loading walk animation:', error) setError('Failed to load walk animation') } ) const idleAnimationGltf = useLoader(GLTFLoader, 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/idle-lReXO7KXnOVoSQhCJ5Vst5c0j0jZku.glb', undefined, (error) => { console.error('Error loading idle animation:', error) setError('Failed to load idle animation') } ) const mixerRef = useRef() const actionsRef = useRef({}) useEffect(() => { if (characterGltf && characterGltf.scene && walkAnimationGltf && idleAnimationGltf) { console.log('Character and animations loaded') setCharacterLoaded(true) try { // Reset the character's scale characterGltf.scene.scale.set(1, 1, 1) resetBoneScales(characterGltf.scene) // Create a new animation mixer const mixer = new THREE.AnimationMixer(characterGltf.scene) mixerRef.current = mixer // Create animation actions const idleAction = mixer.clipAction(idleAnimationGltf.animations[0]) const walkAction = mixer.clipAction(walkAnimationGltf.animations[0]) // Store actions in the ref actionsRef.current = { idle: idleAction, walk: walkAction } // Start playing the idle animation idleAction.play() setAnimationsLoaded(true) } catch (error) { console.error('Error setting up character or animations:', error) setError(`Failed to set up character or animations: ${error.message}`) } } }, [characterGltf, walkAnimationGltf, idleAnimationGltf]) useEffect(() => { if (animationsLoaded) { const { idle, walk } = actionsRef.current if (isMoving) { idle.fadeOut(0.5) walk.reset().fadeIn(0.5).play() } else { walk.fadeOut(0.5) idle.reset().fadeIn(0.5).play() } } }, [isMoving, animationsLoaded]) useFrame((state, delta) => { if (mixerRef.current && characterGltf && characterGltf.scene) { resetBoneScales(characterGltf.scene) mixerRef.current.update(delta) resetBoneScales(characterGltf.scene) } }) if (!characterLoaded || !animationsLoaded) { return } return ( {error && ( )} ) } function Scene() { const [characterPosition, setCharacterPosition] = useState([0, 0, -1]) const [characterRotation, setCharacterRotation] = useState([0, Math.PI, 0]) const [isMoving, setIsMoving] = useState(false) const { camera, gl } = useThree() const [isLocked, setIsLocked] = useState(false) const [cameraAngle, setCameraAngle] = useState({ x: 0, y: 0 }) const keysPressed = useRef({}) const characterVelocity = useRef(new THREE.Vector3()) useEffect(() => { const handleKeyDown = (event) => { keysPressed.current[event.key.toLowerCase()] = true } const handleKeyUp = (event) => { keysPressed.current[event.key.toLowerCase()] = false } window.addEventListener('keydown', handleKeyDown) window.addEventListener('keyup', handleKeyUp) return () => { window.removeEventListener('keydown', handleKeyDown) window.removeEventListener('keyup', handleKeyUp) } }, []) useEffect(() => { const handleMouseMove = (event) => { if (isLocked) { setCameraAngle(prev => ({ x: Math.max(-Math.PI / 2, Math.min(Math.PI / 2, prev.x - event.movementY * 0.002)), y: prev.y - event.movementX * 0.002 })) } } const handleClick = () => { if (!isLocked) { gl.domElement.requestPointerLock() } } const handlePointerLockChange = () => { setIsLocked(document.pointerLockElement === gl.domElement) } gl.domElement.addEventListener('click', handleClick) document.addEventListener('mousemove', handleMouseMove) document.addEventListener('pointerlockchange', handlePointerLockChange) return () => { gl.domElement.removeEventListener('click', handleClick) document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('pointerlockchange', handlePointerLockChange) } }, [isLocked, gl]) useFrame((state, delta) => { const speed = 5 const drag = 0.9 const direction = new THREE.Vector3() if (keysPressed.current['w']) direction.z -= 1 if (keysPressed.current['s']) direction.z += 1 if (keysPressed.current['a']) direction.x -= 1 if (keysPressed.current['d']) direction.x += 1 direction.normalize() direction.applyEuler(new THREE.Euler(0, cameraAngle.y, 0)) characterVelocity.current.add(direction.multiplyScalar(speed * delta)) characterVelocity.current.multiplyScalar(drag) const newPosition = [ characterPosition[0] + characterVelocity.current.x, characterPosition[1], characterPosition[2] + characterVelocity.current.z ] setCharacterPosition(newPosition) if (characterVelocity.current.length() > 0.01) { const angle = Math.atan2(characterVelocity.current.x, characterVelocity.current.z) setCharacterRotation([0, angle, 0]) setIsMoving(true) } else { setIsMoving(false) } const radius = 3 const x = Math.sin(cameraAngle.y) * Math.cos(cameraAngle.x) * radius const z = Math.cos(cameraAngle.y) * Math.cos(cameraAngle.x) * radius const y = Math.sin(cameraAngle.x) * radius const cameraHeight = 2 camera.position.set( newPosition[0] + x, newPosition[1] + y + cameraHeight, newPosition[2] + z ) const lookAtPoint = new THREE.Vector3( newPosition[0], newPosition[1] + 1.5, newPosition[2] ) camera.lookAt(lookAtPoint) }) return ( <> }> ) } function LoadingBox({ position }) { return ( ) } export default function Component() { return (

Click on the scene to lock/unlock mouse controls

) } 7c:["$","$L86",null,{"chatId":"ONHPZzbi6h4","children":["$","$L87",null,{"data":{"@\"active-block\",\"ONHPZzbi6h4\",":{"id":"b_rIvJ784194t","messageId":"d00ECLuUkqj3HTrWtELmvI037kKrgkZB","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"3D-Character-Scene","type":"code-project","project":"3D-Character-Scene"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"ONHPZzbi6h4\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This